<!DOCTYPE html>
<html>
<head>
    <title>欢迎您的到来</title>
    <link rel="stylesheet" href="../../resources/css/bootstrap/bootstrap.min.css">
    <link href="../../resources/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="../../resources/css/plugins/bootstrap-table/bootstrap-table.css"/>
    <link rel="stylesheet" href="../../resources/css/plugins/dialog/bootstrap-dialog.css"/>
    <link rel="stylesheet" href="../../resources/css/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css"/>
    <link rel="stylesheet" href="../../resources/css/pluginsExt/Tabledemo/Tabledemo.css"/>
    <script src="../../resources/js/jquery-2.1.1.js"></script>
    <script src="../../resources/js/bootstrap/bootstrap.min.js"></script>
    <script src="../../resources/js/plugins/bootstrap-table/bootstrap-table.js"></script>
    <script src="../../resources/js/plugins/bootstrap-table/bootstrap-table-zh-CN.js"></script>
    <script src="../../resources/js/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
    <script src="../../resources/js/plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="../../resources/js/plugins/bootstrap-fileinput/fileinput.js"></script>
    <script src="../../resources/js/plugins/jqValidate/jquery.validate.min.js"></script>
    <script src="../../resources/js/messages_zh.js"></script>
</head>
<body>
<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <p>One fine body…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="row-fluid">
    <div class="span12">
        <div class="portlet box grey">
            <div class="portlet-body">
                <table id="fullTab" data-click-to-select="true">
                    <div class="bars pull-left">
                        <i class="btn-group hidden-xs" id="exampleToolbar" role="group">
                            <button type="button" class="btn btnAdd btn-outline btn-default">
                                <i class="glyphicon glyphicon-plus" aria-hidden="true">
                                    添加
                                </i>
                            </button>
                            <button type="button" class="btn btn-outline btn-default">
                                <i class="glyphicon glyphicon-trash" aria-hidden="true">
                                    删除
                                </i>
                            </button>
                            <button type="button" class="btn btn-outline btn-default">
                                <i class="glyphicon glyphicon-refresh"  data-show-refresh="true" aria-hidden="true">
                                    刷新
                                </i>
                            </button>
                        </i>
                    </div>
                    <div class="pull-right">
                        <button class="highSeek btn-primary">高级搜索</button>
                    </div>
                    <div class="pull-right search">
                        <input class="form-control" type="text" placeholder="搜索">
                    </div>
                    <br/>
                    <div class="search pull-left hideForm">
                       <div class="col-md-6">
                           <label for="searchName" class="pull-left col-md-2">
                               姓名：
                           </label>
                           <input type="text" id="searchName" class="form-control col-md-10 pull-left" placeholder="姓名"/>
                       </div>
                       <div class="col-md-6">
                          <label class="pull-left col-md-2">
                              性别：
                          </label>
                          <select class="form-control InputStyle pull-left col-md-10" size="1" name="finished" sb="62975985">、
                              <option value="0">男</option>
                              <option value="1">女</option>
                          </select>
                      </div>
                       <div class="col-md-6 birthDate">
                           <label class="pull-left col-md-1">
                               出生日期：
                           </label>
                           <div class="col-md-9 m_left">
                               <div class="pull-left col-md-4">
                                   <div class="input-group date starttime" >
                                       <input class="form-control col-md-12" size="16" type="text" value="" readonly>
                                       <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                                   </div>
                                   <input type="hidden" id="dtp_input5" value="" /><br/>
                               </div>
                               <b class="pull-left col-md-2">
                                   &nbsp;至&nbsp;
                               </b>
                               <div class="pull-left col-md-4">
                                   <div class="input-group date endtime" >
                                       <input class="form-control col-md-12" size="16" type="text" value="" readonly>
                                       <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                                   </div>
                                   <input type="hidden" id="dtp_input6" value="" /><br/>
                               </div>
                           </div>
                       </div>
                       <div class="col-md-6">
                           <label for="ideCard" class="pull-left col-md-2">
                               身份证：
                           </label>
                           <input type="text" id="ideCard" class="form-control col-md-9 pull-left" placeholder="身份证号码"/>
                       </div>
                        <div class="col-md-6">
                            <label class="col-md-2 address" for="provinceId">
                                地址:
                            </label>
                            <div class="col-md-9 chosAes">
                                <select class="form-control InputStyle pull-left" id="provinceId">
                                    <option>请选择省份</option>
                                </select>
                                <select class="form-control InputStyle pull-left" id="cityId">
                                    <option>请选择市</option>
                                </select>
                                <select class="form-control InputStyle pull-left" id="regionID">
                                    <option>请选择区</option>
                                </select>
                                <div>
                                    <textarea  id="expAddress" class="form-control" rows="3" name="intro" placeholder="详细到门牌号"></textarea>
                                </div>
                            </div>
                        </div>
                       <div class="col-md-6">
                            <label for="sel" class="control-label col-md-2">选择：</label>
                            <div class="col-md-6 selAll">
                                <select multiple="" id="sel" name="sel" class="form-control">
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-5 highSeekBtn col-md-offset-6">
                            <button class="btn" type="reset">
                                <a class="highSeekSeh" href="#search">重置</a>
                            </button>
                            <button class="btn btn-primary" type="submit">
                                <a class="highSeekSeh" href="#search">搜索</a>
                            </button>
                        </div>
                    </div>
                    </table>
        </div>
    </div>
</div>
<script src="../../resources/js/plugins/layer/layer.js"></script>
<script type="text/javascript">
    var $table;
    $(function () {
        initTable();
        $("#btnSearch").click(function () {
            $table.bootstrapTable('refresh');
        });
        $('#btnDelete').click(function () {

        });
        if (document.addEventListener) {
            //如果是Firefox
            document.addEventListener("keypress", enterEvent, true);
        } else {
            //如果是IE
            document.attachEvent("onkeypress", enterEvent);
        }
        $('.btnAdd').click(function(){
            parent.layer.open({
                type: 2,
                skin: 'layui-layer-lan',
                title: '提交',
                fix: true, //不固定
                shadeClose: true,
                shade: 0.3,
                maxmin: true,
                area: ['600px', '600px'],
//                newModule
                content: 'newModule/bootstrap-table-develop/linkForm.html',
                btn: ['重置', '提交']
                ,btn1: function(index, layero){
                    $("input").attr("value","");
                },btn2: function(index, layero){
//                    提交按钮的回调

                        var body=parent.layer.getChildFrame($('body'),index);
                        var iframewin=layero.find('iframe')[0].contentWindow;
                        iframewin.btnSub();
//                    parent.layer.msg('提交成功', {icon: 1});
                    return false;
                },
            });
        })
    });
    //按下Enter搜索
    function enterEvent(evt) {
        if (evt.keyCode == 13) {
            $("#btnSearch").click();
        }
    }
    $('.highSeek').on('click',function(){
        if($('.hideForm').is(":hidden")){
            $('.hideForm').show(200)
        }else{
            $('.hideForm').hide(200)
        }
    })
    function initTable() {
        $table = $('#fullTab').bootstrapTable({
            striped: true,
            pagination: true,
            singleSelect: false,
            pageSize: 30,
            height:500,
            pageList: [10,30,50, 100, 200, 500],
            showColumns: false, //不显示下拉框（选择显示的列）
            queryParams: queryParams,
            minimunCountColumns: 2,
            columns: [{
                field: 'state',
                checkbox: true
            }, {
                field: 'Name',
                title: '姓名',
                width: 100,
                align: 'center',
                valign: 'middle',
                sortable: true,
            }, {
                field: 'Gender',
                title: '性别',
                width: 40,
                align: 'left',
                valign: 'top',
                sortable: true,
            }, {
                field: 'Birthday',
                title: '出生日期',
                width: 80,
                align: 'left',
                valign: 'top',
                sortable: true
            }, {
                field: 'CtfId',
                title: '身份证',
                width: 80,
                align: 'middle',
                valign: 'top',
                sortable: true
            }, {
                field: 'Address',
                title: '地址',
                width: 180,
                align: 'left',
                valign: 'top',
                sortable: true
            }, {
                field: 'Tel',
                title: '固定电话',
                width: 100,
                align: 'left',
                valign: 'top',
                sortable: true
            }, {
                field: 'Mobile',
                title: '手机号码',
                width: 100,
                align: 'left',
                valign: 'top',
                sortable: true
            }, {
                field: 'operate',
                title: '操作',
                width: 100,
                align: 'center',
                valign: 'middle',
                formatter: operateFormatter,
            }],
            data:[{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290355',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1996-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1993-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            },{
                Name:'爱死',
                Gender:'男',
                Birthday:'1992-3-21',
                CtfId:'412319389102831290321',
                Address:'广州市天河区群文件21号',
                Tel:'8412213',
                Mobile:'13901232130',
            }],
            onLoadSuccess:function(){

            },
        });
    }
    function queryParams(params) {
        return {
            pageSize: params.pageSize,
            pageIndex: params.pageNumber,
            UserName: $("#txtName").val(),
            Birthday: $("#txtBirthday").val(),
            Gender: $("#Gender").val(),
            Address: $("#txtAddress").val(),
            name: params.sortName,
            order: params.sortOrder
        };
    }
//
    //删除完成执行的动作
    function nameFormatter(value, row) {
        var icon = row.id % 2 === 0 ? 'glyphicon' : 'glyphicon'
        return '<i class="glyphicon ' + icon + '"></i> ' + value;
    }
//
    function sexFormatter(value) {
        // 16777215 == ffffff in decimal
        var color = '#' + Math.floor(Math.random() * 6777215).toString(16);
        var txtSex="保密";
        if (value == "Gender") {
            txtSex = "性别";
        }
        else if (value == "F") {
            txtSex = "女";
            color='Red';
        }
        else if (value == "M") {
            txtSex = "男";
            color = 'Green';
        }
        else {
            txtSex = "保密";
            color = 'Yellow';
        }
        return '<div  style="color: ' + color + '">' +  txtSex +'</div>';
    }
    function operateFormatter(value, row, index) {
        return [
            '<a class="edit btn btn-xs btn-default" data-toggle="modal" data-target="#edit" style="margin-left:10px"title="编辑">',
            '<i class="glyphicon glyphicon-pencil"></i>',
            '</a>',
            '<a class="remove btn btn-xs btn-default" style="margin-left:10px" title="移除">',
            '<i class="glyphicon glyphicon-trash"></i>',
            '</a>'
        ].join('');
    }
    $(".starttime").datetimepicker({
        language:'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        showMeridian:true,
        pickDate:true,
        format: "yyyy-mm-dd"
    }).on('changeDate',function(ev){
        var starttime=$('.starttime input').val();
        $('.endtime').datetimepicker('setStartDate',starttime);
        $('.starttime').datetimepicker('hide');
    });
    $('.form_date').datetimepicker({
        language:'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        format: "yyyy"+'年'+" m"+'月'+" dd"+'日'
    });
    $('.endtime').datetimepicker({
        language:'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        format: "yyyy"+'-'+"mm"+'-'+"dd"
    }).on('changeDate',function(ev){
        var starttime=$('.starttime').val();
        var endtime=$('.endtime').val();
        if(starttime!=null&&endtime!=null){
            if(!checkEndTime(starttime,endtime)){
                $('.endtime').val('');
                alert('开始时间大于结束时间')
                return
            }
        }
        $('.starttime').datetimepicker('setEndDate',endtime);
        $('.starttime').datetimepicker('hide');
    });
    $('.starttime').datetimepicker('setEndDate',getCurentTime());
    $('.endtime').datetimepicker('setStartDate',getCurentTime());
    $('.starttime').val(getCurentTime());
    $('.endtime').val(getCurentTime());
    function checkEndTime(startTime, endTime) {
        var start = new Date(startTime.replace("-", "/").replace("-", "/"));
        var end = new Date(endTime.replace("-", "/").replace("-", "/"));
        if (end < start) {
            return false;
        }
        return true;
    };
    function getCurentTime() {
        var now = new Date();

        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var day = now.getDate();

        var hh = now.getHours();
        var mm = now.getMinutes();
        var ss = now.getSeconds();

        var clock = year + "-";

        if (month < 10)
            clock += "0";

        clock += month + "-";

        if (day < 10)
            clock += "0";

        clock += day + " ";

        if (hh < 10)
            clock += "0";

        clock += hh + ":";
        if (mm < 10)
            clock += '0';
        clock += mm + ":";
        if (ss < 10)
            clock += '0';
        clock += ss ;
        return (clock);
    };
</script>
</div>
</body>
</html>
